<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">合同执行信息</span>
      </div>
      <div class="content">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <section>
            <div class="section-header">合同基本信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同编号" prop="keywords">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="projectRealName" label="合同名称" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同金额">
                  <a-input-number v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购订单号" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="签订公司/代码" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="projectRealName" label="供应商名称/编码" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="费用支出号" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="SPA项目号" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="所属项目名称码" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目负责人" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同签订人" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同跟进专员" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目经理" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="水电费承担" prop="projectNo">
                  <a-radio-group name="radioGroup" :default-value="1">
                    <a-radio :value="1"> 甲方 </a-radio>
                    <a-radio :value="2"> 乙方 </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="卸货费承担" prop="projectRealName">
                  <div class="disabled-radio">
                  <a-radio-group name="radioGroup" :default-value="2" disabled>
                    <a-radio :value="1"> 甲方 </a-radio>
                    <a-radio :value="2"> 乙方 </a-radio>
                  </a-radio-group>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section>
            <div class="section-header sec-head">
              <div>
                合同付款信息
                <div class="tip" v-if="progress.payInfoList.length">
                  <div><span class="iconfont icon-wancheng"></span>已付款</div>
                  <div><span class="round round-current"></span>当前节点</div>
                  <div><span class="round"></span>未付款</div>
                </div>
              </div>
            </div>
            <a-empty v-if="!progress.payInfoList.length" />
            <div v-else class="section-content section-pay">
              <div class="se-title">
                <!-- <p>计划时间：</p> -->
                <p>付款时间：</p>
                <p>付款进度：</p>
              </div>
              <div class="section-progress" :class="{ 'one-progress': progress.payInfoList.length == 1 }">
                <template>
                  <div class="line" v-for="item of payInfoList" :key="item.id">
                    <template v-for="(obj, oindex) of item.records">
                      <template v-if="![0, 1, 2].includes(obj.status)">
                        <div class="icon" :key="oindex">
                          <span v-if="obj.status == 0" class="iconfont icon-wancheng"></span>
                          <span v-else-if="obj.status == 1" class="iconfont icon-wancheng icon-delay"></span>
                          <span v-else-if="obj.status == 2" class="round round-current"></span>
                          <span v-else class="round"></span>
                          <p>{{ obj.name }}</p>
                        </div>
                      </template>
                      <template v-else>
                        <a-tooltip :defaultVisible="defaultVisible" :visible="defaultVisible" :arrowPointAtCenter="true" :key="oindex">
                          <template slot="title"> {{ obj.planTime }} </template>
                          <div class="icon">
                            <span v-if="obj.status == 0" class="iconfont icon-wancheng"></span>
                            <span v-else-if="obj.status == 1" class="iconfont icon-wancheng icon-delay"></span>
                            <span v-else-if="obj.status == 2" class="round round-current"></span>
                            <span v-else class="round"></span>
                            <p>{{ obj.name }}</p>
                          </div>
                        </a-tooltip>
                      </template>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </section>
          <section>
            <div class="section-header sec-head">
              <div>合同报工信息
              <div class="tip" v-if="progress.reportInfoList.length">
                <div><span class="iconfont icon-wancheng"></span>已付款</div>
                <div><span class="round round-current"></span>当前节点</div>
                <div><span class="round"></span>未开始报工</div>
                <div><span class="iconfont icon-wancheng icon-delay"></span>延期报工</div>
              </div>
              </div>
            </div>
            <a-empty v-if="!progress.reportInfoList.length" />
            <div v-else class="section-content">
              <div class="se-title report">
                <p>计划时间：</p>
                <p>实际时间：</p>
                <p>报工进度：</p>
              </div>
              <div class="section-progress" :class="{ 'one-progress': progress.reportInfoList.length == 1 }">
                <template>
                  <div class="line" v-for="item of reportInfoList" :key="item.id">
                    <template v-for="(obj, oindex) of item.records">
                      <template v-if="![0, 1, 2].includes(obj.status)">
                        <div class="icon" :key="oindex">
                          <p class="paydone"></p>
                          <span v-if="obj.status == 0" class="iconfont icon-wancheng"></span>
                          <span v-else-if="obj.status == 1" class="iconfont icon-wancheng icon-delay"></span>
                          <span v-else-if="obj.status == 2" class="round round-current"></span>
                          <span v-else class="round"></span>
                          <p>{{ obj.name }}</p>
                        </div>
                      </template>
                      <template v-else>
                        <a-tooltip :defaultVisible="defaultVisible" :arrowPointAtCenter="true" :visible="defaultVisible" :key="oindex">
                          <template slot="title"> {{ obj.planTime }} </template>
                          <div class="icon">
                            <p class="paydone">
                              <span>{{ obj.time }}</span>
                            </p>
                            <span v-if="obj.status == 0" class="iconfont icon-wancheng"></span>
                            <span v-else-if="obj.status == 1" class="iconfont icon-wancheng icon-delay"></span>
                            <span v-else-if="obj.status == 2" class="round round-current"></span>
                            <span v-else class="round"></span>
                            <p>{{ obj.name }}</p>
                          </div>
                        </a-tooltip>
                      </template>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </section>
          <section>
            <div class="section-header">合同执行成员表</div>
            <div class="section-table">
              <div>
                <a-table
                  class="hte-table-content"
                  :columns="reservationColumns"
                  :data-source="reservationData"
                  :pagination="pagination"
                  :loading="tabLoading"
                  bordered
                  size="middle"
                  @change="pageChange"
                >
                  <span slot="taskTotal" slot-scope="text">
                    <i :class="{ succfont: text > 5 }">{{ text }}</i>
                  </span>
                  <template slot="toAudit" slot-scope="text, record">
                    <a-button class="mr10" type="primary" size="small">添加</a-button>
                    <a-button type="primary" size="small" @click="handledDelFile(record)">删除</a-button>
                  </template>
                </a-table>
              </div>
            </div>
          </section>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractPerformInfo',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      form: {
        id: '',
        projectClass: '10',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        lastProjectNo: '',
        lastProjectName: '',
        keywords: '',
        highTechType: '',
        isHighTechProject: false,
        isHighTechProjectText: '',
        projectContent: '',
        projectUseFor: '',
        isNeedEngineeringMotion: null,
        motionProjectNameOrNo: '',
        functionAndPerformance: '',
        sourceBefore: '',
        technologyTarget: '',
        economyTarget: '',
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {
        keywords: [
          {
            required: true,
            message: '请输入与项目相关的关',
            trigger: 'blur',
          },
          { min: 1, max: 127, message: '关键词不超过127个字符', trigger: 'blur' },
        ],
        // 设置必填项
      },
      payInfoList: [],
      reportInfoList: [],
      progress: { payInfoList: [], reportInfoList: [] },
      reservationColumns: [
        {
          title: '参与角色名称',
          dataIndex: 'taskTotal',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'taskTotal' },
        },
        {
          title: '人员名单',
          dataIndex: 'teamName',
          width: '65%',
          align: 'left',
        },
        {
          title: '操作',
          dataIndex: 'delayTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'toAudit' },
        },
      ],
      reservationData: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      defaultVisible: false,
    }
  },
  mounted() {
    const that = this
    const testList = [
      { name: '节点01', time: '2020-06-05', status: 0, planTime: '2020-06-15', id: 1 },
      { name: '节点02', time: '2020-06-05', status: 0, planTime: '2020-06-15', id: 2 },
      { name: '节点03', time: '2020-06-05', status: 1, planTime: '2020-06-15', id: 3 },
      { name: '节点04', time: '2020-06-05', status: 0, planTime: '2020-06-15', id: 4 },
      { name: '节点05', time: '2020-06-05', status: 1, planTime: '2020-06-15', id: 5 },
      { name: '节点06', time: '2020-06-05', status: 0, planTime: '2020-06-15', id: 6 },
      { name: '节点07', time: '2020-06-05', status: 1, planTime: '2020-06-15', id: 7 },
      { name: '节点08', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 8 },
      { name: '节点09', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 9 },
      { name: '节点10', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 10 },
      { name: '节点11', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 11 },
      { name: '节点12', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 12 },
      { name: '节点13', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 13 },
      { name: '节点14', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 14 },
    ]
    this.getPayInfoData(testList, 'payInfoList')

    const testList2 = [
      { name: '节点01', time: '2020-06-05', status: 0, planTime: '2020-06-15', id: 1 },
      { name: '节点02', time: '2020-06-05', status: 1, planTime: '2020-06-15', id: 2 },
      { name: '节点03', time: '2020-06-05', status: 2, planTime: '2020-06-15', id: 3 },
      { name: '节点04', time: '2020-06-05', status: 3, planTime: '2020-06-15', id: 4 },
      { name: '节点05', time: '2020-06-05', status: 4, planTime: '2020-06-15', id: 5 },
      { name: '节点06', time: '2020-06-05', status: 4, planTime: '2020-06-15', id: 6 },
      { name: '节点07', time: '2020-06-05', status: 4, planTime: '2020-06-15', id: 7 },
      { name: '节点08', time: '2020-06-05', status: 4, planTime: '2020-06-15', id: 8 },
      { name: '节点09', time: '2020-06-05', status: 4, planTime: '2020-06-15', id:  9},
      { name: '节点10', time: '2020-06-05', status: 4, planTime: '2020-06-15', id:  10},
      { name: '节点11', time: '2020-06-05', status: 4, planTime: '2020-06-15', id:  19},
    ]
    this.getPayInfoData(testList2, 'reportInfoList')
    setTimeout(()=>{
      that.defaultVisible = true;
    }, 2000)
  },
  methods: {
    handledDelFile(item) {},
    pageChange() {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      // this.getConTaskListData()
    },
    /**
     * 计算进度
     */
    getPayInfoData(list, targe) {
      this.progress[targe] = list
      const totalPage = Math.ceil(list.length / 10)
      for (let j = 0; j < totalPage; j++) {
        const start = j * 10
        const end = start + 10
        const pageNowData = list.slice(start, end)
        this[targe].push({
          records: pageNowData,
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      section {
        padding: 32px 29px 20px;
        background: #fff;
        margin-bottom: 18px;
        border: solid 1px #e2e2e2;
        .iconfont {
          font-size: 20px;
          color: #12adf1;
          position: relative;
          background-color: #fff;
          &.icon-delay {
            color: #f59a23;
          }
        }
        .round {
          width: 20px;
          height: 20px;
          border-radius: 100%;
          background-color: #aeaeae;
          display: inline-block;
          vertical-align: text-bottom;
          margin-top: 5px;
          position: relative;
          z-index: 1;
        }
        .round-current {
          background-color: #18c55d;
          &:after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #fff;
            top: 5px;
            left: 5px;
          }
        }
        .section-header {
          .tip {
            background-color: #f2f2f2;
            border-radius: 8px;
            display: inline-block;
            padding: 7px 14px;
            margin-left: 32px;
            > div {
              display: inline-block;
              font-weight: normal;
              font-size: 14px;
              margin: 0 11px;
              span {
                margin: 0 2px;
              }
            }
          }
          .iconfont {
            background-color: inherit;
            top: 2px;
          }          
        }
        .section-table {
          .mr10 {
            margin-right: 10px;
          }
        }
        .section-content {
          margin: 120px 0px 20px 64px;
          display: flex;
          .se-title {
            flex: 0 0 81px;
            color: #333;
            position: relative;
            top: -83px;
            left: 0;
            > p {
              margin-bottom: 23px;
            }
            &.report {
              > p:nth-child(2) {
                padding-top: -3px;
              }
              > p:nth-child(3) {
                padding-top: 7px;
              }
            }
          }
          .section-progress {
            width: calc(100% - 81px);
            .line {
              display: flex;
              position: relative;
              padding-bottom: 50px;
              justify-content: flex-start;
              .paydone {
                margin-top: -81px;
                height: 77px;
                > span {
                  padding: 2px 4px;
                  background-color: #f2f2f2;
                  color: #999;
                }
              }
              &:nth-child(odd),
              &:nth-child(even) {
                .icon {
                  text-align: center;
                  width: 10%;
                  position: relative;
                  z-index: 1;
                  > p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 3px;
                    background-color: #c5c5c5;
                    top: 23px;
                  }
                }
                &:before {
                  content: '';
                  position: absolute;
                  width: 3px;
                  height: 128px;
                  background-color: #c5c5c5;
                  top: 23px;
                }
              }
              &:nth-child(odd) {
                .icon {
                  &:before {
                    left: 0;
                  }
                }
                &:before {
                  right: 0;
                }
              }
              &:nth-child(even) {
                flex-direction: row-reverse;
                .icon {
                  &:before {
                    right: 0;
                  }
                }
                &:before {
                  left: 0;
                }
              }
              &:last-child:nth-child(even),
              &:last-child:nth-child(odd) {
                .icon {
                  &:last-child {
                    &:before {
                      width: 50%;
                    }
                  }
                }
                &:before {
                  display: none;
                }
                padding-bottom: 0;
              }
              &:first-child {
                .icon:first-child {
                  &:before {
                    width: 50%;
                    left: 50%;
                  }
                }
              }
              .round {
                vertical-align: inherit;
              }
            }
            &.one-progress {
              .line {
                &:first-child {
                  .icon:first-child {
                    &:before {
                      width: 0;
                    }
                  }
                }
              }
            }
          }
          &.section-pay {
            margin: 80px 0px 20px 64px;
            .se-title {
              top: -39px;
            }
            .section-progress {
              .line {
                &:nth-child(odd),
                &:nth-child(even) {
                  .icon {
                    &:before {
                      top: 14px;
                    }
                  }
                  &:before {
                    height: 118px;
                    top: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /deep/ .ant-input-number {
    width: 100%;
  }
}
</style>
